<template>
  //对接
  <div class="buyer-info">
    <h1>买家信息</h1>
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="buyers.length">
      <table>
        <thead>
        <tr>
          <th>买家ID</th>
          <th>买家姓名</th>
          <th>买家电话</th>
          <th>购买历史</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="buyer in buyers" :key="buyer.buyerId">
          <td>{{ buyer.buyerId }}</td>
          <td>{{ buyer.buyerName }}</td>
          <td>{{ buyer.buyerPhone }}</td>
          <td>
            <button @click="toggleTransactionDetails(buyer.buyerId)">
              查看购买历史
            </button>
            <div v-if="activeBuyer === buyer.buyerId">
              <ul>
                <li v-for="(item, index) in buyer.tradeHistory" :key="index">
                  <p><strong>交易时间：</strong>{{ item.tradeTime }}</p>
                  <p><strong>交易地址：</strong>{{ item.tradeAddress }}</p>
                  <div>
                    <strong>商品信息：</strong>
                    <div>
                      <img :src="item.goods.imageUrl" alt="商品图片" width="100" />
                      <div>
                        <p><strong>{{ item.goods.goodsName }}</strong></p>
                        <p style="color: red;"><strong>¥ {{ item.goods.price }}</strong></p>
                        <p style="color: #0056b3">{{ item.goods.description }}</p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      buyers: [], // 存储买家信息
      activeBuyer: null, // 当前查看的买家ID
      isLoading: true, // 加载状态
      error: null, // 错误信息
    };
  },
  methods: {
    async fetchBuyers() {
      try {
        const response = await axios.get("http://localhost:8080/buyers");
        this.buyers = response.data.map(buyer => ({
          ...buyer,
          tradeHistory: [
            {
              tradeTime: buyer.tradeTime,
              tradeAddress: buyer.tradeAddress,
              goods: buyer.goods
            }
          ]
        }));
      } catch (error) {
        this.error = "获取买家信息失败，请稍后重试！";
        console.error("获取买家信息失败:", error);
      } finally {
        this.isLoading = false;
      }
    },
    toggleTransactionDetails(buyerId) {
      this.activeBuyer = this.activeBuyer === buyerId ? null : buyerId;
    }
  },
  mounted() {
    this.fetchBuyers(); // 获取买家信息
  },
};
</script>

<style scoped>
.buyer-info {
  padding: 20px;
}

.loading {
  text-align: center;
  font-size: 18px;
}

.error {
  color: red;
  font-size: 18px;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #f4f4f4;
}

td {
  background-color: #fff;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button:active {
  transform: scale(0.98);
}

img {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ul li p {
  margin: 5px 0;
}

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
  img {
    width: 80px;
    height: 80px;
  }
}
</style>
